<template>
  <div id="invoicepdf" class="dashboard-container">
    <h2 class="head-big-title">Cipta Pesanan Pembelian</h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div class="card-div">
      <el-card shadow="always" :body-style="{ padding: '15px 0 25px 20px' }">
        <el-form
          :inline="true"
          :model="newOrderData"
          label-position="top"
          size="medium">
          <el-form-item class="one-form-item">
            <h2>Dealer utama</h2>
            <el-select v-model="dealerInfo" @change="getDealerInfo" value-key="id" placeholder="Master Dealer">
              <el-option v-for="(item,index) in dealerLists" :key="index" @input="changeNew($event)" :label="item.dealerName" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="one-form-item">
            <h2>Tairkh Pesanan</h2>
            <el-date-picker
              v-model="newOrderData.time"
              class="input-width"
              type="datetime"
              style="width: 100%;"
              placeholder="Tarikh">
            </el-date-picker>
          </el-form-item>
          <el-form-item class="one-form-item">
            <h2>Alamat Bil</h2>
            <p>
              <svg-icon icon-class="ico_user"></svg-icon>
              {{detailData.billingAddr.name}}</p>
            <p style="margin-top: 12px;word-break:normal;">
              <svg-icon icon-class="ico_address"></svg-icon>
              {{detailData.billingAddr.streetAddress + ', ' +detailData.billingAddr.regionalAddress + ', ' + detailData.billingAddr.postCode + ', ' + detailData.billingAddr.city + ', ' + detailData.billingAddr.region}}</p>
            <p style="margin-top: 12px;">
              <svg-icon icon-class="ico_phone"></svg-icon>
              {{detailData.billingAddr.phoneNumber}}</p>
          </el-form-item>
          <el-form-item class="one-form-item">
            <h2>Alamat Penghantaran</h2>
            <p>
              <svg-icon icon-class="ico_user"></svg-icon>
              {{detailData.shopAddr.name}}</p>
            <p style="margin-top: 12px;word-break:normal;">
              <svg-icon icon-class="ico_address"></svg-icon>
              {{detailData.shopAddr.streetAddress + ', ' +detailData.shopAddr.regionalAddress + ', ' + detailData.shopAddr.postCode + ', ' + detailData.shopAddr.city + ', ' + detailData.shopAddr.region}}</p>
            <p style="margin-top: 12px;">
              <svg-icon icon-class="ico_phone"></svg-icon>
              <el-input
                type="textarea"
                :rows="5"
                @input="changeNew($event)"
                placeholder="Nota Penghantaran"
                v-model="newOrderData.orderMsg.buyerMsg">
              </el-input></p>
          </el-form-item>

        </el-form>
      </el-card>
      <h2 class="head-big-title">Produk
        <el-button
          round
          type="warning"
          size="mini"
          icon="el-icon-plus"
          style="float: right;margin-right: 5%"
          @click="addProducts">Tambah Produk</el-button>
      </h2>
      <el-table
        :data="products"
        :show-header="false"
        style="width: 92%;margin: 0 4%;margin-bottom: 15px;">
        <el-table-column>
          <template slot-scope="scope">
            <el-card shadow="never" style="border: 0;margin-bottom: 10px;">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-delete"
                style="float: right;"
                @click="reduceCardCount(scope.row)"></el-button>
              <div style="display: block;width: 29%;float: left;">
                <el-image
                  style="width: 64px; height: 64px;display: inline-block;"
                  :src="picbase + scope.row.picUrl"></el-image>
              </div>
              <div style="display: block;width: 70%;float: left;">
                <p>Nama Produk</p>
                <el-select v-model="scope.row.productId" placeholder="Nama" @change="chooseProdct(scope.$index, scope.row)">
                  <el-option v-for="(item,index) in productList" :key="index" :label="item.productName" :value="item.productId"></el-option>
                </el-select>
              </div>
              <br style="clear: both;"/>
              <div style="display: block;width: 40%;float: left;">
                <p>Kuantiti</p>
                <el-input v-model="scope.row.quantity" @blur="changeNumber(scope.$index, scope.row)" placeholder="Kuantiti"></el-input>
              </div>
              <div style="display: block;width: 58%;float: left;padding-left: 3%;">
                <p>Harga</p>
                <p style="line-height: 40px;">{{ $formatMoneyStr(scope.row.money) }} (1{{ scope.row.unit +')'}}</p>
              </div>
              <br style="clear: left;"/>
              <el-divider></el-divider>
              <p style="text-align: right;"><label style="float: left;">Jumlah</label>{{ $formatMoneyStr(scope.row.total) }}</p>
            </el-card>
          </template>
        </el-table-column>
<!--          <el-table-column prop="money" align="center" label="Price"></el-table-column>-->
<!--          <el-table-column prop="total" label="Jumlah"></el-table-column>-->
<!--          <el-table-column label="Tindakan">-->
<!--            <template slot-scope="scope">-->
<!--            </template>-->
<!--          </el-table-column>-->
      </el-table>
      <el-card shadow="always" :body-style="{ padding: '15px 0 25px 20px' }" style="text-align: right;padding: 10px 4%;">
        <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Jumlah Kecil</label><span style="float: left;">: </span>{{  $formatMoneyStr(totalData.total) }}</p>
        <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Jumlah Penghantaran</label><span style="float: left;">: </span>RM 0.00</p>
        <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Penyesuaian</label><span style="float: left;">: </span>RM 0.00</p>
        <el-divider></el-divider>
        <p><label style="float: left;text-align: left;width: 45%;display: inline-block;">Jumlah Pesanan</label><span style="float: left;">: </span>{{ $formatMoneyStr(totalData.total) }}</p>
      </el-card>
      <div>
        <el-button round type="primary" @click="newOrderClick" style="float: right;margin: 15px 4% 15px 0;">Cipta Pesanan Pembelian</el-button>
        <el-button round @click="$router.push({path:'/Orders/Query'})" style="float: right;margin: 15px 4% 15px 0">Balik</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { admin_addOrderApi, queryProductApi, queryDealerApi, dealer_query_oneApi } from '@/api/user'

export default {
  name: 'Report',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      msg: 'Selamat Datang',
      token: '',
      productList: [],
      products: [],
      tableDatab: [],
      dealerData: {},
      dealerLists: [],
      newOrderData: {
        orderMsg: {}
      },
      totalData: {
        total:0
      },
      dealerInfo: {},
      detailData: {
        shopAddr: {
          name: 'Luqman bin Muhammad Asmin',
          phoneNumber: '+6016 888 8888',
          streetAddress: 'No.66, Block Crystal, Jalan 1/19,40150, Petaling Jaya, Selangor,Malaysia'
        },
        billingAddr: {
          name: 'Luqman bin Muhammad Asmin',
          phoneNumber: '+6016 888 8888',
          streetAddress: 'No.66, Block Crystal, Jalan 1/19,40150, Petaling Jaya, Selangor,Malaysia'
        }
      },
      orderChart1: '',
      orderChart2: '',
      orderChart3: ''
    }
  },
  created() {
    this.newOrderData.time = this.$now
    this.getProductList()
  },
  mounted() {
    this.getDealerList()
  },
  methods: {
    changeNew() {
      this.$forceUpdate()
    },
    getCompanyInfo() {
      dealer_query_oneApi().then(res => {
        this.dealerData = res.data
      }).catch(err => {
        this.$message.error('ERROR')
        this.dealerData = []
        console.log(err)
      })
    },
    newOrderClick() {
      this.newOrderData.detail = this.products
      admin_addOrderApi(this.newOrderData).then(res => {
        this.$message({
          message: 'success',
          type: 'success'
        })
        this.$router.push({ path: '/Orders/Query' })
      }).catch(err => {
        console.log(err)
      })
    }, // 得到数据表格
    addProducts() {
      this.products.push({
        'quantity': 1,
        'unit': '*',
        'money': 0,
        'total': 0
      })
    },
    getDealerList() {
      queryDealerApi({ pageNum: 100, pageIndex: 1 }).then(res => {
        this.dealerLists = res.data.records
      }).catch(err => {
        console.log(err)
      })
    },
    chooseProdct(index, item) {
      console.log(index, item)
      this.products.splice(index, 0)
      // this.products.splice(index, 1)
      for (let i = 0; i < this.productList.length; i++) {
        if (this.productList[i].productId == item.productId) {
          item.money = this.productList[i].priceMasterDealer * this.productList[i].productSku.exchangeNum
          item.picUrl = this.productList[i].picUrl
          item.unit = this.productList[i].productSku.unit
          item.moq = this.productList[i].productSku.moq
          item.quantity = this.productList[i].productSku.moq
          break
        }
      }
      item.total = item.money * item.quantity
      this.products.splice(index, 1, item)
      this.getTableTotal()
    },
    getDealerInfo(item) {
      // (newOrderData.dealerId)
      this.detailData = item
      this.newOrderData.dealerId = item.dealerId
    },
    changeNumber(index, item) {
      console.log(index, item)
      if (item.quantity < item.moq) {
        item.quantity = item.moq
      }
      this.products.splice(index, 0)
      // this.products.splice(index, 1)
      item.total = item.quantity * item.money
      this.products.splice(index, 1, item)
      this.getTableTotal()
    },
    getTableTotal() {
      if (this.products.length) {
        if (this.products.length > 0) {
          this.totalData.total = 0
          for (let i = 0; i < this.products.length; i++) {
            this.totalData.total = this.totalData.total + this.products[i].total
          }
        }
      }
    },
    getProductList() {
      queryProductApi({ pageNum: 100, pageIndex: 1 }).then(res => {
        this.productList = res.data.records
      }).catch(err => {
        this.productList = []
        console.log(err)
      })
    },
    reduceCardCount(item) {
      var index = this.products.indexOf(item)
      if (index !== -1) {
        this.products.splice(index, 1)
      }
    },
    handleDel() {

    },
    handleEdit() {

    }
  }
}

</script>

<style lang="scss" scoped>
  .dashboard {
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .big-title{
    text-align: left;
    font-size: 16px;
    margin: 0;
    clear: both;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }
  .one-form-item{
    display: block;
    .el-select{
      width: 100%;
    }
    .el-input{
      width: 100%;
    }
  }
  .two-card-not + .two-card-not{
    margin-left: 2%;
  }
  .two-card-a{
    width: 65%;
  }
  .two-card-b{
    width: 33%;
  }
  .total-sum-div{
    padding: 20px;
    text-align: left;
    width: 40%;float: right;margin-right: 4%;
  }
  .total-sum-div .middle-info label{
    width: 188px;
    display: inline-block;
  }
  .total-sum-div .middle-info{
    margin-left: 66px;
    line-height: 24px;
  }
  .two-card-not{
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .two-card + .two-card{
    margin-left: 2%;
  }

  .two-card{
    width: 49%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .one-card{
    width: 100%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 19px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .last-days-order{
    width: 92%;
    margin: 0 4%;
    border-radius: 20px;
  }
  .last-days-order .erchart-div{
    height:278px;display: inline-block;background-color: white;border-radius: 10px;
  }
  .header-div{
    float: right;
    text-align: center;
    margin-right: 64px;
    position: relative;
    bottom: 21px;
  }
  .header-div p{
    margin: 10px 0;
  }
  .header-div img{
    width: 64px;
    height: 64px;
  }
  .head-info-three{
    width: 28%;
    margin-right: 20px;
    margin-bottom: 15px;
    display: inline;
    float: left;
  }
  .card-div{
    width: 94%;text-align: left;margin: 0 3% 66px 3%
  }
  .two-info{
    width: 45%;
    margin-right: 5%;
    margin-bottom: 20px;
    margin-top: 0;
    display: inline-block;
    line-height: 18px;
  }
  .two-info i{
    margin-right: 15px;
    color: #1482f0;
  }
</style>
